<template>
    <div class='footer'>
        <div class="footer1">
            <span class="scroll"></span>
            <div class="footer-first">
                <div class="first">
                    <p><a href="#">增值电信业务经营许可证粤B2-20090191</a></p>
                    <p><a href="#">增值电信业务经营许可证B2-20090058</a></p>
                    <p><a href="#">网络出版服务许可证（署）网出证</a></p>
                    <p><a href="#">互联网新闻信息服务许可证</a></p>
                    <p><a href="#">广东省通信管理局</a></p>
                    <p class="pic"><a href="">粤公网安备 44010602006299号</a></p>
                </div>
                <div class="second">
                    <p><a href="#">国际联网备案</a></p>
                    <p><a href="#">北京互联网举报中心</a></p>
                    <p><a href="#">中国互联网举报中心</a></p>
                    <p><a href="#">不良信息举报平台</a></p>
                    <p><a href="#">文明办网举报电话</a></p>
                    <p><a href="#">智慧315</a></p>
                </div>
                <div class="third">
                    <p><a href="#">北京网络行业协会</a></p>
                    <p><a href="#">广播电视节目制作经营许可证</a></p>
                    <p><a href="#">北京地区联合辟谣平台</a></p>
                    <p><a href="#">粤网文[2020] 3377-188号</a></p>
                    <p><a href="#">互联网药品信息服务资格证书</a></p>
                    <p><a href="#">(粤)-非经营性-2021-0018</a></p>
                </div>
                <div class="forth">
                    <p><a href="#">北京网通提供网络带宽</a></p>
                    <p><a href="#">举报邮箱：jubao@vip.163.com</a></p>
                    <p><a href="#">违法和不良信息举报电话：0571-89853167</a></p>
                    <p><a href="#">营业执照</a></p>
                    <p><a href="#">信息网络传播视听节目许可证</a></p>
                </div>
            </div>
        </div>
        <div class="centerP">
            <p><a href="#">工业和信息化部备案管理系统网站 苏B2-20090191-18</a></p>
            <p class="picLogo">
                <span class="picCon"><img src="../../public/images/logo.png" alt=""></span>
                <a href="">主办单位：耐思书店（NICE-Bookstore）</a>
            </p>
        </div>
        <span>法律声明</span>
        <el-divider direction="vertical"></el-divider>
        <span>友情链接</span>
        <el-divider direction="vertical"></el-divider>
        <span @click="drawer = true" class="leftPoint">联系我👈</span>
        <br />
        <br />
        <br />
        <el-drawer title="联系我" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
            <p class='info'>
                <i class="el-icon-phone"></i>电话:17683258291<br />
                <i class="el-icon-s-promotion"></i>邮箱:nemox86@163.com<br />
                <i class="el-icon-info"></i><a
                    href="https://gitee.com/Li-xin-xin-9527">gitee:https://gitee.com/Li-xin-xin-9527/</a> <br />
            </p>
        </el-drawer>
    </div>
</template>
<style>
.el-divider {
    background-color: rgb(84, 92, 100);
}
</style>
<style scoped>
/* .leftPoint {
    line-height: 100px;
} */

.footer {
    width: auto;
    background-color: rgb(235, 229, 229);
}

.footer1 {
    width: 100%;
    height: 260px;
    /* background-color: #ecdfad; */
    position: relative;
}

a {
    color: #666;
    text-decoration: none;
    line-height: 20px;
}

a:hover {
    color: #ba2636;
    text-decoration: underline;
}

.footer-first {
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    text-align: left;
}

.footer-first div {
    margin-top: 40px;
    font-size: 12px;
    width: 250px;
}

.second {
    /* padding: 42px 0px 35px 70px; */
    /* width: 220px;*/
    padding-left: 10px;
}

.centerP {
    clear: both;
    /* color: #666; */
    text-align: center;
    margin-top: -10px;
    padding-bottom: 15px;
    position: relative;
}

.bottom {
    text-align: center;
}

.pic {
    position: relative;
    margin-left: 17px;
}

.pic a::before {
    position: absolute;
    left: -17px;
    top: 0;
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('https://static.ws.126.net/163/f2e/www/index20170701/images/sprite_img20211126.png') no-repeat -459px -662px;
}


.picLogo:hover .picCon {
    display: block;

}

.picCon {
    width: 200px;
    height: 200px;
    position: absolute;
    top: -150px;
    left: 50%;
    margin-left: -100px;
    display: none;
}

.picCon img {
    width: 160px;
}

.footer {
    height: 250px;
    text-align: center;
    font-size: 16px;
    padding: 0px 100px;
    position: relative;
}

.footer {
    cursor: pointer;
}

.copyright {
    font-size: 12px;
}

.info {
    font-size: 14px;
    color: #72767b;
    line-height: 25px;
}

.footer .scroll {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 60%;
    background-image: url('../../public/images/scroll2.webp');
    background-repeat: no-repeat;
    background-size: 18px;
    position: absolute;
    left: 10%;
    top: -20px;
    z-index: 10;
    animation: scrollA infinite 20s linear alternate;
}

@keyframes scrollA {
    0% {
        left: 5%;
        transform: rotate(180deg);
    }

    ;

    10% {
        left: 5%;
        transform: rotate(270deg);
    }

    20% {
        left: 5%;
        transform: rotate(450deg);
    }

    25% {
        left: 10%;
        transform: rotate(540deg);
    }

    30% {
        left: 20%;
        transform: rotate(720deg);
    }

    35% {
        left: 30%;
        transform: rotate(900deg);
    }

    40% {
        left: 40%;
        transform: rotate(1080deg);
    }

    45% {
        left: 50%;
        transform: rotate(1260deg);
    }

    50% {
        left: 60%;
        transform: rotate(1440deg);
    }

    55% {
        left: 70%;
        transform: rotate(1620deg);
    }

    60% {
        left: 80%;
        transform: rotate(1800deg);
    }

    80% {
        left: 90%;
        transform: rotate(2610deg);
    }

    90% {
        left: 90%;
        transform: rotate(2340deg);
    }

    100% {
        left: 90%;
        transform: rotate(2520deg);
    }
}
</style>
<script>
export default {
    name: 'FooterView',
    data() {
        return {
            drawer: false,
            direction: 'btt'
        }
    },
    methods: {
        handleClose(done) {
            done()
        }
    },
}

</script>